<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
    <title>影片表单</title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">影片<span th:text="${film.id != null ? '编辑' : '新增'}"></span></div>
                <form id="film-form" class="layui-form layui-card-body" action="#" method="post">
                  <input type="hidden" name="id" th:value="${film.id}">
                  <div class="layui-form-item">
                    <label class="layui-form-label">影片</label>
                    <div class="layui-input-block">
                      <input type="text" name="filmname" required th:value="${film.filmname}"  lay-verify="required" placeholder="影片名" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <div id="remark" th:name="summary"></div>
                        <textarea th:hidden="summary" th:name="summary" id="summary"></textarea>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button type="button" class="layui-btn layui-btn-blue" onclick="saveFilm()">保存</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
                </form>  
            </div>
        </div>
    </div>
    <script th:src="@{/assets/layui.all.js}"></script>
    <script th:src="@{/assets/lay/modules/layui-xtree.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!--富文本编辑器wangEditor-->
    <script th:src="@{/assets/wangeditor/wangEditor.min.js}"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
        var summary = [[${film.summary}]];
        /*]]>*/
    </script>
    <script>
      var form = layui.form
        ,layer = layui.layer;
    </script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#remark')
        var text1 = $('#summary')
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            text1.val(html)
        }
        // 或者 var editor = new E( document.getElementById('editor') )
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = contextPath + '/a/upload/editor'
        //配置指定文件名
        editor.customConfig.uploadFileName = 'file'
        //如果图片不大，可以用base64存储
        /*加载插件*/
        editor.create()
        /*完成数据的回显*/
        editor.txt.text(summary)
    </script>
    <script type="text/javascript">
        //异步保存
        function saveFilm() {
            var data = $("#film-form").serialize();

            $.ajax({
                type : "post",
                url : contextPath + "/a/film/save",
                data : data,
                success : function(jsonData) {
                    layer.msg('保存成功', {icon: 1},function () {
                        //重新加载页面
                        layer.load(1);
                        window.location.reload(true);
                    });
                }
            })
        }


    </script>
</body>
</html>